<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>测试</title>
<style>
.canvas{
	border:1px solid #333;
	cursor:pointer;
	display:block;
	margin:0 auto;
	margin-bottom:10px;
}
</style>
</head>

<body>
<div class="canvasbox">
    <canvas id="myCanvas" class="canvas"></canvas>
</div>
<script>
var canvas=document.getElementById('myCanvas');//获取画布
var ctx=canvas.getContext('2d');//用于在画布上绘图的环境
var devicePixelRatio = 2;//直接使用高清
var ctxW = 64*devicePixelRatio*10;
var ctxH = 210*devicePixelRatio;
canvas.width=ctxW;//设定画布宽度，就是格子*每格像素
canvas.height=ctxH;//设定画布高度，就是格子*每格像素
canvas.style.width = ctxW/devicePixelRatio + "px";
canvas.style.height = ctxH/devicePixelRatio +"px";

var imgSrc = [
	"img/bg.png",
	"img/90325.png"
]
var images = [];

ctx.font = String(14*devicePixelRatio)+"px Courier New";//设定字体
ctx.fillStyle = "#333";//设定字颜色
ctx.textAlign="center";//设定字居中
ctx.fillText("读取中...", Math.round(ctxW/2), 50*devicePixelRatio);

var humanHeight = 68;
//人物[X，Y，宽，高，状态,裁切x，裁切y，裁切宽度,裁切高度]
var sx = 2;
var sy = 16;
var swidth =46;
var sheight = 68;

var human = [];

var fps = null;

var leftAnime = null; 
var rightAnime = null; 

var leftFlg  = false;
var upFlg    = false;
var downFlg  = false;
var rightFlg = false;

var walkSpeed = 5;
var walkAnime = false;

function init(){
	clearInterval(fps);//清除刷新画布定时器
	leftFlg  = false;
	upFlg    = false;
	downFlg  = false;
	rightFlg = false;
	
	sx = 2;
	sy = 16;
	swidth =46;
	sheight = 68;

	humanHeight = 68;
	human = [0,(ctxH-(ctxH-16-humanHeight))*devicePixelRatio,46*devicePixelRatio,68*devicePixelRatio,0,sx,sy,swidth,sheight];
	fps = setInterval(function(){//100毫秒刷新画布
		ctx.clearRect(0,0,canvas.width,canvas.height);//清空画布
		hunmanStatu();
		myWalker();
		paintBG();
		paintMy();
	},1000/60);
	
}

function loading(){
	var imgLength = imgSrc.length;
	var loadingNum = 0;
	for(var i=0;i<imgLength;i++){
		images[i] = new Image();
		images[i].src = imgSrc[i];
		images[i].onload = function(){
			loadingNum++;
			if(loadingNum===imgLength){
				loadingOK();
			}
		}
	}
}

function loadingOK(){
	ctx.clearRect(0,0,canvas.width,canvas.height);//清空画布
	ctx.font = String(14*devicePixelRatio)+"px Courier New";//设定字体
	ctx.fillStyle = "#333";//设定字颜色
	ctx.textAlign="center";//设定字居中
	ctx.fillText("点击开始游戏", Math.round(ctxW/2), 50*devicePixelRatio);
	canvas.onclick=function(event){
		init();
	};
}

function paintBG(){
	ctx.drawImage(images[0],0,0,canvas.width,canvas.height);
}
function hunmanStatu(){
	var hunmanStatu = human[4];
	if(hunmanStatu===0){
		sx = 2;
		sy = 16;
		swidth =46;
		sheight = 68;
	}
	if(hunmanStatu===1){
		rightAnime = setInterval(function(){
			
		},200)
	}
}
function paintMy(){
	var humanX = human[0];
	var humanY = human[1];
	var humanW = human[2];
	var humanH = human[3];
	
	var humanSX = human[5];
	var humanSY = human[6];
	var humanSwidth =human[7];
	var humanSheight =human[8];
	
	ctx.drawImage(images[1],humanSX,humanSY,humanSwidth,humanSheight,humanX,humanY,humanW,humanH);
	if(hunmanStatu===1){
	}
}

function myWalker(){
	if (leftFlg){
		human[0] = human[0]+walkSpeed;
	}
	if (upFlg){
	
	}
	if (downFlg){
		
	}
	if (rightFlg){
		human[0] = human[0]-walkSpeed;
	}
}
loading();

document.onkeydown=function(event){//绑定键盘事件按下
	var e = event || window.event || arguments.callee.caller.arguments[0];
	
	if(e && e.keyCode==68){//左a
		leftFlg  = true;
		human[4] = -1;
	}
	if(e && e.keyCode==65){//右d
		rightFlg = true;
		human[4] = 1;
	}
	
	if(e && e.keyCode==87){//上w
		upFlg    = true;
	}
	
	if(e && e.keyCode==83){//下s
		downFlg  = true;
	}
	if(e && e.keyCode==32){//空格
		
	}
	
}
document.onkeyup=function(event){//绑定键盘事件弹起
	var e = event || window.event || arguments.callee.caller.arguments[0];
	
	if(e && e.keyCode==68){//左a
		leftFlg  = false;
		human[4] = 0;
	}
	if(e && e.keyCode==65){//右d
		rightFlg = false;
		human[4] = 0;
	}
	
	if(e && e.keyCode==87){//上w
		upFlg    = false;
		human[4] = 0;
	}
	
	if(e && e.keyCode==83){//下s
		downFlg  = false;
		human[4] = 0;
	}
	if(e && e.keyCode==32){//空格
		
	}
}
</script>
</body>
</html>
